<template>
  <div class="payment-success-page">
    <div class="success-container">
      <!-- 成功图标 -->
      <div class="success-icon">
        <i class="el-icon-success"></i>
      </div>

      <!-- 支付成功信息 -->
      <h2 class="success-title">支付成功！</h2>
      <p class="success-desc">您的订单已完成支付，充电桩已为您预留</p>

      <!-- 订单信息卡片 -->
      <el-card class="order-info-card" shadow="hover">
        <div class="info-row">
          <span class="label">订单编号：</span>
          <span class="value">{{ orderInfo.orderCode }}</span>
        </div>
        <div class="info-row">
          <span class="label">支付金额：</span>
          <span class="value highlight">¥{{ orderInfo.amount }}</span>
        </div>
        <div class="info-row">
          <span class="label">支付方式：</span>
          <span class="value">{{ paymentMethodText }}</span>
        </div>
        <div class="info-row">
          <span class="label">支付时间：</span>
          <span class="value">{{ orderInfo.payTime }}</span>
        </div>
        <div class="info-row">
          <span class="label">充电桩编号：</span>
          <span class="value">{{ orderInfo.pileCode }}</span>
        </div>
      </el-card>

      <!-- 操作按钮 -->
      <div class="action-buttons">
        <el-button type="primary" size="large" @click="goToOrderDetail">
          查看订单详情
        </el-button>
        <el-button size="large" @click="goToHome">
          返回首页
        </el-button>
      </div>

      <!-- 温馨提示 -->
      <div class="tips">
        <p>温馨提示：</p>
        <p>1. 请在15分钟内到达充电桩开始充电</p>
        <p>2. 如需帮助，请联系客服：400-123-4567</p>
      </div>
    </div>
  </div>
</template>

<script>
import request from '@/utils/request'

export default {
  name: 'PaymentSuccess',
  data() {
    return {
      orderInfo: {
        orderCode: '',
        amount: 0,
        paymentMethod: '',
        payTime: '',
        pileCode: ''
      }
    }
  },
  computed: {
    paymentMethodText() {
      const methods = {
        'alipay': '支付宝支付',
      }
      return methods[this.orderInfo.paymentMethod] || '未知支付方式'
    }
  },
  mounted() {
    this.getOrderInfo()
  },
  methods: {
    async getOrderInfo() {
      const orderId = this.$route.query.orderId
      if (!orderId) {
        this.$message.warning('订单ID不存在')
        this.$router.push('/order')
        return
      }

      const loading = this.$loading({
        lock: true,
        text: '加载订单信息...',
        spinner: 'el-icon-loading'
      })

      try {
        const response = await request({
          url: `/order/${orderId}`,
          method: 'get'
        })

        if (response.code === 200) {
          const data = response.data
          this.orderInfo = {
            orderCode: data.orderCode,
            amount: data.totalAmount,
            paymentMethod: data.paymentMethod,
            payTime: this.formatDateTime(data.payTime),
            pileCode: data.pileCode
          }
        } else {
          this.$message.error(response.msg || '获取订单信息失败')
        }
      } catch (error) {
        console.error(error)
        this.$message.error('网络错误')
      } finally {
        loading.close()
      }
    },
    formatDateTime(dateStr) {
      if (!dateStr) return '-'
      const date = new Date(dateStr)
      const year = date.getFullYear()
      const month = String(date.getMonth() + 1).padStart(2, '0')
      const day = String(date.getDate()).padStart(2, '0')
      const hours = String(date.getHours()).padStart(2, '0')
      const minutes = String(date.getMinutes()).padStart(2, '0')
      const seconds = String(date.getSeconds()).padStart(2, '0')
      return `${year}-${month}-${day} ${hours}:${minutes}:${seconds}`
    },
    goToOrderDetail() {
      const orderId = this.$route.query.orderId
      this.$router.push(`/order/detail?id=${orderId}`)
    },
    goToHome() {
      this.$router.push('/')
    }
  }
}
</script>

<style scoped>
.payment-success-page {
  min-height: 100vh;
  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 20px;
}

.success-container {
  background: white;
  border-radius: 16px;
  padding: 48px 40px;
  max-width: 600px;
  width: 100%;
  box-shadow: 0 20px 60px rgba(0, 0, 0, 0.3);
  text-align: center;
}

.success-icon {
  margin: 0 auto 24px;
  width: 100px;
  height: 100px;
  background: linear-gradient(135deg, #52c41a 0%, #389e0d 100%);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  animation: scaleIn 0.5s ease-out;
}

.success-icon i {
  font-size: 60px;
  color: white;
}

@keyframes scaleIn {
  0% {
    transform: scale(0);
    opacity: 0;
  }
  50% {
    transform: scale(1.1);
  }
  100% {
    transform: scale(1);
    opacity: 1;
  }
}

.success-title {
  font-size: 28px;
  color: #333;
  margin-bottom: 12px;
  font-weight: 600;
}

.success-desc {
  font-size: 16px;
  color: #666;
  margin-bottom: 32px;
}

.order-info-card {
  margin-bottom: 32px;
  text-align: left;
}

.info-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 12px 0;
  border-bottom: 1px solid #f0f0f0;
}

.info-row:last-child {
  border-bottom: none;
}

.info-row .label {
  font-size: 14px;
  color: #666;
}

.info-row .value {
  font-size: 15px;
  color: #333;
  font-weight: 500;
}

.info-row .value.highlight {
  font-size: 20px;
  color: #ff4d4f;
  font-weight: 600;
}

.action-buttons {
  display: flex;
  gap: 16px;
  justify-content: center;
  margin-bottom: 32px;
}

.action-buttons .el-button {
  min-width: 140px;
}

.tips {
  background: #f6f8fa;
  border-radius: 8px;
  padding: 16px;
  text-align: left;
}

.tips p {
  margin: 8px 0;
  font-size: 13px;
  color: #666;
  line-height: 1.6;
}

.tips p:first-child {
  font-weight: 600;
  color: #333;
  margin-bottom: 12px;
}

@media (max-width: 768px) {
  .success-container {
    padding: 32px 20px;
  }

  .action-buttons {
    flex-direction: column;
  }

  .action-buttons .el-button {
    width: 100%;
  }
}
</style>